<template>
	<view class="charts-box">
		<!-- <qiun-data-charts 
      type="pie"
      :opts="opts"
      :chartData="chartData"
    /> -->
		<!-- <qiun-data-charts type="pie" :opts="locationChartOpts" :chartData="locationChartData" :canvas2d="true"
			canvasId="locationChart" /> -->
		<qiun-data-charts :canvasId="canvasId" type="rose" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
import { hazardlocationPie } from '@/api/ring.js';
export default {
	props: ['yearMonth'],
	data() {
		return {
			canvasId: 'roseChart',
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				//      "#48DE94", "#1F90FF", "#5155C6", "#5644FF","#FFEBC8","#FF4C52","#72dce8","#3ee063"
				// color: ["#7AECF8","#A5A1FF","#5155C6", "#FAB2FF","#EDCE85","#FEA492","#7AECF8","#48DE94","#48DE94", "#1F90FF", "#5155C6", "#5644FF","#FFEBC8","#FF4C52","#72dce8","#3ee063"],
				padding: [1, 1, 1, 1],
				enableScroll: false,
				legend: {
					show: true,
					position: 'right',
					lineHeight: 10,
					fontSize: 10,
					itemWidth: 2, // 颜色块宽度（默认值，可调整）
					itemHeight: 2 // 颜色块高度（默认值，可调整）
				},
				extra: {
					rose: {
						type: 'area',
						minRadius: 30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 1,
						labelHight: 1,
						border: false,
						borderWidth: 20,
						borderColor: '#FFFFFF',
						linearType: 'custom'
					}
				}
			}
			// opts: {
			// 	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			// 		"#ea7ccc"
			// 	],
			// 	padding: [5, 5, 5, 5],
			// 	enableScroll: false,
			// 	legend: {
			// 		show: true,
			// 		position: "left",
			// 		lineHeight: 25
			// 	},
			// 	extra: {
			// 		rose: {
			// 			type: "area",
			// 			minRadius: 50,
			// 			activeOpacity: 0.5,
			// 			activeRadius: 10,
			// 			offsetAngle: 0,
			// 			labelWidth: 15,
			// 			border: false,
			// 			borderWidth: 2,
			// 			borderColor: "#FFFFFF"
			// 		}
			// 	}
			// }
		};
	},
	mounted() {
		this.getServerData();
	},
	watch: {
		yearMonth() {
			this.getServerData();
		}
	},
	methods: {
		getServerData() {
			hazardlocationPie(this.yearMonth).then((res) => {
				const keyMap = {
					location: 'name',
					count: 'value'
				};

				let data = res.data;
				const result = data.map((obj) =>
					Object.keys(obj).reduce((acc, key) => {
						const newKey = keyMap[key] || key;
						acc[newKey] = obj[key];
						acc.labelShow = false;
						return acc;
					}, {})
				);
				// console.log(result);

				let resData = {
					series: [
						{
							data: result
						}
					]
				};

				// this.opts.legend = {
				// 	show: true,
				// 	position: "right",
				// 	lineHeight: 12,
				// 	fontSize: 8,
				// 	formatter: (name) => {
				// 		const item = resData.series.find(v => v.name === name);
				// 		return `${name}: ${item.value}吨`;
				// 	}
				// }
				this.chartData = JSON.parse(JSON.stringify(resData));
			});
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 200rpx;
}
::v-deep .u-charts-rose-label-point {
	width: 2rpx !important;
	height: 2rpx !important;
	border-radius: 50% !important;
}
</style>
